import { Component, Input, OnInit, Output, EventEmitter, AfterViewInit, AfterViewChecked } from '@angular/core';
import 'rxjs/add/operator/switchMap';
import { Observable } from 'rxjs';
import { Event } from '@angular/router';
// import { MatDialog } from '@angular/material';
import { UtilService } from '../../my-service/util.service';
import { appService } from '../../my-service/app.service';
// import { ComfirmDialog } from '../../my-public-component/comfirm-dialog';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
declare var $: any;
@Component({
  selector: 'canvas-add-root',
  templateUrl: './canvasadd.component.html',
  styleUrls: ['./canvasadd.component.css'],
})
export class canvasaddComponent implements OnInit, AfterViewInit, AfterViewChecked {
  @Input() pointdata: any;
  _px = "px";
  _css3: boolean = false;
  mouseX;mouseY;objX;objY;
  candel:boolean;
  notedom;
  touchdom;
  canWaterfall=true;
  userGuid='';
  load=false;
  TipsStyle="background:red;position: absolute; width: 100%;height: 100%;left: 0;top: 0;color: #fff;text-align: center;padding: 20%;"
  constructor(private _sanitizer: DomSanitizer, private UtilService: UtilService,private appService: appService){}
  @Output() onCloseAdd = new EventEmitter<Event>();
  @Output() onAdd = new EventEmitter<Event>();
  @Output() deldata = new EventEmitter<Event>();
async  ngOnInit() {
  console.log(this.pointdata)
    this.userGuid = await this.UtilService.getUserInfo().then(res => res.userGuid)
    this.getRate()
    this.load=true;
    this._css3 = true;
    Observable.fromEvent(window, 'resize')
      .subscribe((event) => {
        this.waterfall();
      });
  }
  async getRate() {
    for (let item of this.pointdata.note) {
      let data = {
        FK_StudentGuid: this.userGuid,
        FK_NoteGuid: item.PK_NoteGuid
      }
       await this.appService.noteByStudent(data).then(res => {
        item.userScore=res.s 
        item.Score=res.s0 
      })
      
    }
  }
  async onRate(value, note) {
    let data = {
      FK_StudentGuid: this.userGuid,
      Score: value * 2,
      FK_NoteGuid: note.PK_NoteGuid
    }
    note.userScore=value*2
    note.Score = await this.appService.note(data).then(re => re.socer)
    this.UtilService.remind('success','评分成功！')
  }
  ngAfterViewInit() {
    this.waterfall();
  }
  ngAfterViewChecked() {
    this.waterfall();
  }
  //瀑布流
  waterfall() {
    if(this.pointdata.note.length && this.canWaterfall){
      let windowW = $(`.addnotebox`).width(),
      noteW = $(`.note2`).outerWidth(true),
      num = Math.floor(windowW / noteW),
      colSumHeight = [];
      let margin=($('.canvasadd').width() - noteW*num)/2;
    for (var i = 0; i < num; i++) {
      colSumHeight.push(0);
    }
    $(".note2").each(function () {
      var $cur = $(this),
        idx = 0,
        minSumHeight = colSumHeight[0];
      for (var i = 0; i < colSumHeight.length; i++) {
        if (minSumHeight > colSumHeight[i]) {
          minSumHeight = colSumHeight[i];
          idx = i;
        }
      }
      $cur.css({
        left: noteW * idx,
        top: minSumHeight
      })
      colSumHeight[idx] = colSumHeight[idx] + $cur.outerHeight(true);
    })
    $(`.addnotebox`).css('margin',`1% ${margin}px`)
    }
  }
  //关闭弹窗事件
  closeAdd($event: Event): void {
    this.onCloseAdd.emit($event);
  }
  //添加事件,调用底层的添加标签的事件
  add($event: Event) {
    this.onAdd.emit(this.pointdata);
  }
  enter(deldom) {
    deldom.style.opacity=".6";
  }
  leave(deldom) {
    deldom.style.opacity="0";
  }
  //删除事件,调用底层的删除标签的事件
  del(notedata) {
    this.deldata.emit(notedata.PK_NoteGuid);
    setTimeout(()=>{
      this.waterfall()
    },400)
    setTimeout(()=>{
      this.waterfall()
    },800)
  }
  del2(notedata) {
    this.deldata.emit(notedata.PK_NoteGuid);
    setTimeout(()=>{
      this.waterfall()
    },400)
    setTimeout(()=>{
      this.waterfall()
    },800)
  }
  //被拖拽dom经过标签容器时
  ondragenter1(candel){
    this.tips(false)
    event.preventDefault();
    this.candel=candel;
  }
  //被拖拽dom经过标签容器外时
  ondragenter2(candel){
    this.tips(true)
    event.preventDefault();
    this.candel=candel;
  }
  //拖拽结束
  ondragend(note){
    if(this.candel){
      this.UtilService.comfirm2('确定要删除该标签？',()=>{
        this.del(note);
      },()=>{
        this.tips(false)
      })
      // let dialogRef = this.dialog.open(ComfirmDialog, {
      //   data: {content:"" }
      // });
      // dialogRef.afterClosed().subscribe(res => {
      //     if(res){
          
      //     }
      //     else{
           
      //     }
      // })
    }
  }
  //拖拽开始并登记拖拽元素
  ondragstart(note2){
    this.notedom=note2;
  }
  //提示的开启与关闭
  tips(tips){
    if(tips){
      this.notedom.style.opacity=".6";
      $(this.notedom).append(`<div class="alert" style="${this.TipsStyle}">删除标签？</div>`)
    }
    else{
      this.notedom.style.opacity="1";
      $(".alert").remove();
    }
  }
  //通过angular的外来注入检查
  Color(color){
    return this._sanitizer.bypassSecurityTrustStyle(color);
  }
}
